<template>
	<div class="about">
		<div ref="chart" style="width: 100%;height:100%;"></div>
	</div>
</template>
<script>
	import * as echarts from 'echarts'

	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		getLast7Days
	} from '@/network/lswms/base/printBarcode.js'

	export default {
		// 启动函数
		setup() {
			const state = reactive({
				chart: ref(document.getElementById('main'))

			})

			const init = () => {

				getLast7Days().then((res) => {
					if (res.code != 0) {
						return;
					}
					let map = res.data;
					let datestr = map.dayStr;
					let paQty = map.paQty;
					let pickQty = map.pickQty;
					
					if (state.chart) {
						// 图表的初始化
						let myChart = echarts.init(state.chart)
						const option = {
							title: {
								text: '近7天出入库量',
							},
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: ['入库', '出库']
							},
							toolbox: {
								show: true,
								feature: {
									dataView: {
										show: true,
										readOnly: false
									},
									magicType: {
										show: true,
										type: ['line', 'bar']
									},
									restore: {
										show: true
									},
									saveAsImage: {
										show: true
									}
								}
							},
							calculable: true,
							xAxis: [{
								type: 'category',
								data:datestr
							}],
							yAxis: [{
								type: 'value'
							}],
							series: [{
									name: '入库',
									type: 'bar',
									data:paQty,
								},
								{
									name: '出库',
									type: 'bar',
									data: pickQty,
								}
							]
						};
						// 指定数据项和数据显示
						myChart.setOption(option);
					}
				})
			}

			onMounted(() => {
				init();
			})

			return state
		}
	}
</script>
